<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://codepen.io/prvnbist/pen/gKParr</title>
    <style type="text/css">
        body{
            padding: 0;
            margin: 0;
            background:#3F51B5;
            background-image: linear-gradient(#7E57C2 50%, #3F51B5);
            text-align: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height:100vh;
        }
        h1{
            color:#fff;
            font-family: 'Lato';
            font-weight:100;
            padding:30px;
            display:block;
        }
        .wrapper{
            position:absolute;
            top:20%;
            left:50%;
            transform:translate(-50%, -20%);
        }
        .wrapper .icon{
            margin:20px;
        }
        /* nav-icon-1 */
        .nav-icon-1{
            width: 30px;
            height: 30px;
            position: relative;
            transition: .1s;
            margin: 10px 10px;
            cursor: pointer;
            display: inline-block;
        }
        .nav-icon-1 span{
            width: 5px;
            height: 5px;
            background-color: #fff;
            display: block;
            border-radius: 50%;
            position: absolute;

        }
        .nav-icon-1:hover span{
            transform: scale(1.2);
            transition: 350ms cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-1 span:nth-child(1){
            left: 0;
            top: 0;
        }
        .nav-icon-1 span:nth-child(2){
            left: 12px;
            top: 0;
        }
        .nav-icon-1 span:nth-child(3){
            right: 0;
            top: 0;
        }
        .nav-icon-1 span:nth-child(4){
            left: 0;
            top: 12px;
        }
        .nav-icon-1 span:nth-child(5){
            position: absolute;
            left: 12px;
            top: 12px;
        }
        .nav-icon-1 span:nth-child(6){
            right: 0px;
            top: 12px;
        }
        .nav-icon-1 span:nth-child(7){
            left: 0px;
            bottom: 0px;
        }
        .nav-icon-1 span:nth-child(8){
            position: absolute;
            left: 12px;
            bottom: 0px;
        }
        .nav-icon-1 span:nth-child(9){
            right: 0px;
            bottom: 0px;
        }
        .nav-icon-1.open{
            transform: rotate(180deg);
            cursor: pointer;
            transition: .2s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-1.open span{
            border-radius: 50%;
            transition-delay: 200ms;
            transition: .5s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-1.open span:nth-child(2) {
            left: 6px;
            top: 6px;
        }
        .nav-icon-1.open span:nth-child(4) {
            left: 6px;
            top: 18px;
        }
        .nav-icon-1.open span:nth-child(6) {
            right: 6px;
            top: 6px;
        }
        .nav-icon-1.open span:nth-child(8) {
            left: 18px;
            bottom: 6px;
        }
        /* nav-icon-2 */
        .nav-icon-2{
            width: 35px;
            height: 30px;
            margin: 10px 10px;
            position: relative;
            cursor: pointer;
            display: inline-block;
        }
        .nav-icon-2 span{
            background-color:#FFF;
            position: absolute;
            border-radius: 2px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-2 span:nth-child(1){
            width: 100%;
            height:  4px;
            display: block;
            top: 0px;
            left: 0px;
        }
        .nav-icon-2 span:nth-child(2){
            width: 100%;
            height:  4px;
            display: block;
            top: 13px;
            left: 0px;
        }
        .nav-icon-2 span:nth-child(3){
            width: 100%;
            height:  4px;
            display: block;
            bottom: 0px;
            left: 0px;
        }
        .nav-icon-2:not(.open):hover span:nth-child(1){
            width: 100%;
            height:  4px;
            display: block;
            top: -2px;
            left: 0px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-2:not(.open):hover span:nth-child(2){
            width: 100%;
            height:  4px;
            display: block;
            top: 13px;
            left: 0px;
            transition: .4s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-2:not(.open):hover span:nth-child(3){
            width: 100%;
            height:  4px;
            display: block;
            bottom: -2px;
            left: 0px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-2.open span:nth-child(1){
            left:3px;
            top: 12px;
            width: 30px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            transform: rotate(90deg);
            transition-delay: 150ms;
        }
        .nav-icon-2.open span:nth-child(2){
            left:2px;
            top: 20px;
            width: 20px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            transform: rotate(45deg);
            transition-delay: 50ms;
        }
        .nav-icon-2.open span:nth-child(3){
            left:14px;
            top: 20px;
            width: 20px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            transform: rotate(-45deg);
            transition-delay: 100ms;
        }
        /* nav-icon-3 */
        .nav-icon-3{
            width: 35px;
            height: 30px;
            margin: 10px 10px;
            position: relative;
            cursor: pointer;
            display: inline-block;
        }
        .nav-icon-3 span{
            background-color:#FFF;
            position: absolute;
            border-radius: 2px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-3 span:nth-child(1){
            width: 100%;
            height:  4px;
            display: block;
            top: 0px;
            left: 0px;
        }
        .nav-icon-3 span:nth-child(2){
            width: 100%;
            height:  4px;
            display: block;
            top: 13px;
            left: 0px;
        }
        .nav-icon-3 span:nth-child(3){
            width: 100%;
            height:  4px;
            display: block;
            bottom: 0px;
            left: 0px;
        }
        .nav-icon-3:not(.open):hover span:nth-child(1){
            width: 100%;
            height:  4px;
            display: block;
            top: -2px;
            left: 0px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-3:not(.open):hover span:nth-child(2){
            width: 100%;
            height:  4px;
            display: block;
            top: 13px;
            left: 0px;
            transition: .4s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-3:not(.open):hover span:nth-child(3){
            width: 100%;
            height:  4px;
            display: block;
            bottom: -2px;
            left: 0px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-3.open {
            transform: rotate(-90deg);
        }
        .nav-icon-3.open  span:nth-child(1){
            left:3px;
            top: 12px;
            width: 30px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            transform: rotate(90deg);
            transition-delay: 150ms;
        }
        .nav-icon-3.open  span:nth-child(2){
            left:2px;
            top: 20px;
            width: 20px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            transform: rotate(45deg);
            transition-delay: 50ms;
        }
        .nav-icon-3.open  span:nth-child(3){
            left:14px;
            top: 20px;
            width: 20px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            transform: rotate(-45deg);
            transition-delay: 100ms;
        }
        /* nav-icon-4 */
        .nav-icon-4{
            width: 35px;
            height: 30px;
            margin: 10px 10px;
            position: relative;
            cursor: pointer;
            display: inline-block;
        }
        .nav-icon-4 span{
            background-color:#FFF;
            position: absolute;
            border-radius: 2px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-4 span:nth-child(1){
            width: 100%;
            height:  4px;
            display: block;
            top: 0px;
            left: 0px;
        }
        .nav-icon-4 span:nth-child(2){
            width: 100%;
            height:  4px;
            display: block;
            top: 13px;
            left: 0px;
        }
        .nav-icon-4 span:nth-child(3){
            width: 100%;
            height:  4px;
            display: block;
            bottom: 0px;
            left: 0px;
        }
        .nav-icon-4:not(.open):hover span:nth-child(1){
            width: 100%;
            height:  4px;
            display: block;
            top: -2px;
            left: 0px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-4:not(.open):hover span:nth-child(2){
            width: 100%;
            height:  4px;
            display: block;
            top: 13px;
            left: 0px;
            transition: .4s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-4:not(.open):hover span:nth-child(3){
            width: 100%;
            height:  4px;
            display: block;
            bottom: -2px;
            left: 0px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        }
        .nav-icon-4.open {
            transform: rotate(90deg);
        }
        .nav-icon-4.open span:nth-child(1){
            left:3px;
            top: 12px;
            width: 30px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            transform: rotate(90deg);
            transition-delay: 150ms;
        }
        .nav-icon-4.open span:nth-child(2){
            left:2px;
            top: 20px;
            width: 20px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            transform: rotate(45deg);
            transition-delay: 50ms;
        }
        .nav-icon-4.open span:nth-child(3){
            left:14px;
            top: 20px;
            width: 20px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            transform: rotate(-45deg);
            transition-delay: 100ms;
        }
        /* nav-icon-5 */
        .nav-icon-5{
            width: 35px;
            height: 30px;
            margin: 10px 10px;
            position: relative;
            cursor: pointer;
            display: inline-block;
        }
        .nav-icon-5 span{
            background-color:#fff;
            position: absolute;
            border-radius: 2px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            width:100%;
            height: 4px;
            transition-duration: 500ms
        }
        .nav-icon-5 span:nth-child(1){
            top:0px;
            left: 0px;
        }
        .nav-icon-5 span:nth-child(2){
            top:13px;
            left: 0px;
            opacity:1;
        }
        .nav-icon-5 span:nth-child(3){
            bottom:0px;
            left: 0px;
        }
        .nav-icon-5:not(.open):hover span:nth-child(1){
            transform: rotate(-3deg) scaleY(1.1);
        }
        .nav-icon-5:not(.open):hover span:nth-child(2){
            transform: rotate(3deg) scaleY(1.1);
        }
        .nav-icon-5:not(.open):hover span:nth-child(3){
            transform: rotate(-4deg) scaleY(1.1);
        }
        .nav-icon-5.open span:nth-child(1){
            transform: rotate(45deg);
            top: 13px;
        }
        .nav-icon-5.open span:nth-child(2){
            opacity:0;
        }
        .nav-icon-5.open span:nth-child(3){
            transform: rotate(-45deg);
            top: 13px;
        }
        /* nav-icon-6 */
        .nav-icon-6{
            width: 35px;
            height: 30px;
            margin: 10px 10px;
            position: relative;
            cursor: pointer;
            display: inline-block;
        }
        .nav-icon-6 span{
            background-color:#fff;
            position: absolute;
            border-radius: 2px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            width:100%;
            height: 4px;
        }
        .nav-icon-6 span:nth-child(1){
            top:0px;
            left: 0px;
        }
        .nav-icon-6 span:nth-child(2){
            top:13px;
            left: 0px;
        }
        .nav-icon-6 span:nth-child(3){
            bottom:0px;
            left: 0px;
        }
        .nav-icon-6:not(.open):hover span:nth-child(1){
            transform:  scaleY(1.2);
            left: -5px;
        }
        .nav-icon-6:not(.open):hover span:nth-child(2){
            transform: rotate(5deg) scaleY(1.1);
        }
        .nav-icon-6:not(.open):hover span:nth-child(3){
            transform:  scaleY(1.2);
            left: 5px;
        }
        .nav-icon-6.open span:nth-child(1){
            transform: rotate(45deg) scaleX(0.7);
            top: 13PX;
            left: -8px;
        }
        .nav-icon-6.open span:nth-child(2){
            transform: scale(0);
            transition-duration: 50ms
        }
        .nav-icon-6.open span:nth-child(3){
            transform: rotate(-45deg) scaleX(0.7);
            top: 13PX;
            left: 7px;
        }
        /* nav-icon-7 */
        .nav-icon-7{
            width: 35px;
            height: 30px;
            margin: 10px 10px;
            position: relative;
            cursor: pointer;
            display: inline-block;
        }
        .nav-icon-7 span{
            background-color:#FFF;
            position: absolute;
            border-radius: 2px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            width:100%;
            height: 4px;
        }
        .nav-icon-7 span:nth-child(1){
            top:0px;
            left: 0px;
        }
        .nav-icon-7 span:nth-child(2){
            top:13px;
            left: 0px;
        }
        .nav-icon-7 span:nth-child(3){
            bottom:0px;
            left: 0px;
        }
        .nav-icon-7:not(.open):hover span:nth-child(1){
            transform: scaleX(.8);
        }
        .nav-icon-7:not(.open):hover span:nth-child(2){
            transform: scaleX(.5);
        }
        .nav-icon-7:not(.open):hover span:nth-child(3){
            transform: scaleX(.8);
        }
        .nav-icon-7.open span:nth-child(1){
            transform: rotate(90deg);
            top: 13PX;
        }
        .nav-icon-7.open span:nth-child(2){
            transform: scale(0);
            transition-duration: 50ms
        }
        .nav-icon-7.open span:nth-child(3){
            top: 13PX;
        }
        /* nav-icon-8 */
        .nav-icon-8{
            width: 35px;
            height: 30px;
            margin: 10px 10px;
            position: relative;
            cursor: pointer;
            display: inline-block;
        }
        .nav-icon-8 span{
            background-color:#FFF;
            position: absolute;
            border-radius: 2px;
            transition: .3s cubic-bezier(.8, .5, .2, 1.4);
            width:100%;
            height: 4px;
        }
        .nav-icon-8 span:nth-child(1){
            top:0px;
            left: 0px;
        }
        .nav-icon-8 span:nth-child(2){
            top:13px;
            left: 0px;
        }
        .nav-icon-8 span:nth-child(3){
            bottom:0px;
            left: 0px;
        }
        .nav-icon-8:not(.open):hover span:nth-child(1){
            transform: scaleX(.8);
        }
        .nav-icon-8:not(.open):hover span:nth-child(2){
            transform: scaleX(.5);
        }
        .nav-icon-8:not(.open):hover span:nth-child(3){
            transform: scaleX(.8);
        }
        .nav-icon-8.open span:nth-child(1){
            top: 13px;
        }
        .nav-icon-8.open span:nth-child(2){
            top:13px;
        }
        .nav-icon-8.open span:nth-child(3){
            top: 13px;
        }






        /*  footer   */
        footer {
            background-color: #222;
            color: #fff;
            font-size: 14px;
            bottom: 0;
            position: fixed;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 999;
        }

        footer p {
            margin: 10px 0;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida  Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        footer .fa-heart{
            color: red;
        }
        footer .fa-dev{
            color: #fff;
        }
        footer .fa-twitter-square{
            color:#1da0f1;
        }
        footer .fa-instagram{
            color: #f0007c;
        }
        fotter .fa-linkedin{
            color:#0073b1;
        }
        footer .fa-codepen{
            color:#fff
        }
        footer a {
            color: #3c97bf;
            text-decoration: none;
            margin-right:5px;
        }
        .youtubeBtn{
            position: fixed;
            left: 50%;
            transform:translatex(-50%);
            bottom: 45px;
            cursor: pointer;
            transition: all .3s;
            vertical-align: middle;
            text-align: center;
            display: inline-block;
        }
        .youtubeBtn i{
            font-size:20px;
            float:left;
        }
        .youtubeBtn a{
            color:#ff0000;
            animation: youtubeAnim 1000ms linear infinite;
            float:right;
        }
        .youtubeBtn a:hover{
            color:#c9110f;
            transition:all .3s ease-in-out;
        }
        .youtubeBtn i:active{
            transform:scale(.9);
            transition:all .3s ease-in-out;
        }
        .youtubeBtn span{
            font-family: 'Lato';
            font-weight: bold;
            color: #fff;
            display: block;
            font-size: 12px;
            float: right;
            line-height: 20px;
            padding-left: 5px;

        }

        @keyframes youtubeAnim{
            0%,100%{
                color:#c9110f;
            }
            50%{
                color:#ff0000;
            }
        }
        /* footer  */
    </style>
</head>
<body type="pug">
<!-- Inspiration: https://dribbble.com/shots/4397812-Click-Me -->

<div class='wrapper'>
    <h1>Hamburger Icons Animations</h1>
    <div class="icon nav-icon-1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="icon nav-icon-2">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="icon nav-icon-3">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="icon nav-icon-4">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="icon nav-icon-5">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="icon nav-icon-6">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="icon nav-icon-7">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="icon nav-icon-8">
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>







<footer>
    <p>
        Created with <i class="fa fa-heart"></i> by
        <a target="_blank" href="https://codepen.io/ahmadbassamemran/">Ahmad Emran</a>
        Follow me :
        <a target="_blank"  href="https://www.instagram.com/ahmadbassamemran/"><i class="fab fa-instagram"></i></a>
        <a target="_blank"  href="https://www.linkedin.com/in/ahmademarn/"><i class="fab fa-linkedin"></i></a>
        <a target="_blank" href="https://codepen.io/ahmadbassamemran/"><i class="fab fa-codepen"></i></a>
        <a target="_blank" href="https://dev.to/ahmadbassamemran"><i class="fab fa-dev"></i></a>
        <a target="_blank" href="https://twitter.com/ahmadbassamemra"><i class="fab fa-twitter-square"></i></a>
    </p>
</footer>

<div class="youtubeBtn">
    <a target="_blank" href="https://www.youtube.com/AhmadEmran?sub_confirmation=1">
        <span>Watch on YouTube</span>
        <i class="fab fa-youtube"></i>
    </a>

</div>
<script>
    const icons = document.querySelectorAll('.icon');
    icons.forEach (icon => {
        icon.addEventListener('click', (event) => {
            icon.classList.toggle("open");
        });
    });
</script>
</body>
</html>